<template>
  <div id='my'>
       <blur :blur-amount=10 :url="url" :height="180">
        <p class="center"><img :src="url"></p>
        <div class='ownname'>loong</div>
      </blur>
   <footerTab></footerTab>
  </div>
</template>

<script>
import footerTab from '@/components/footer';
import { Blur } from 'vux'

export default {
   name: 'my',
  components: {
    footerTab,Blur
  },
  methods: {
  },
  data () {
    return {
        url: 'https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg'
    }
  }
}
</script>
<style scoped>
.center {
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
}
.center img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #ececec;
}
.ownname{
    text-align: center;
    line-height: 2rem;
    color: #fff;
    font-size: 18px;
}
</style>